<template>
	<view class="gjl-components">
		<view class="red-bg">
			<image :src="initConfig.vip_page.vip_red_bg" mode=""></image>
		</view>
		<view class="red-content">
			<view class="label">
				会员专属
			</view>
			<view class="content">
				<view class="red-price"><text class="price">¥5</text>全场通用</view>
				<view class="red-type">无门槛红包</view>
				<view class="red-dec">会员专享5元红包</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				initConfig: 'initConfig'
			})
		},
	}
</script>

<style scoped lang="scss">
	.gjl-components{
		position: relative;
		image{
			height: 100%;
			width: 100%;
		}
		.red-bg{
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			display: flex;
		}
		.red-content{
			position: relative;
			z-index: 2;
			width: 214rpx;
			height: 198rpx;
			overflow: hidden;
			.label{
				position: absolute;
				top: 0;
				left: 0;
				background: #000000;
				border-radius: 20rpx 0px 20rpx 0px;
				padding: 0 9rpx;
				line-height: 39rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFE3BB;
			}
			.content{
				margin-top: 59rpx;
				padding-left: 30rpx;
				.red-dec{
					margin-top: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 20rpx;
					color: #C70000;
				}
				.red-type{
					padding: 0 10rpx;
					margin-top: 12rpx;
					background: linear-gradient(90deg, #FF5858 0%, rgba(255, 112, 112, 0.25) 100%);
					border-radius: 8rpx;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: #FFFFFF;
					max-width: 122rpx;
				}
				.red-price{
					font-size: 24rpx;
					font-weight: 500;
					color: #683400;
					.price{
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>